
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  
	<meta name="author" content="码客">
	<meta name="keywords" content="关键词">
	<meta name="description" content="描述">
	<link rel="shortcut icon" href="#"/>
	<title>青春在线</title>
	<link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/public.js"></script>
</head>
<body>
<header>
	<div class="nav-area">
		<div class="logo">
			<a href="index.html">
				<img src="imgs/logo.png" alt="logo图标">
			</a>
		</div>
		<nav>
			<ul>
				<li><a href="index.html">首页</a></li>
				<li><a href="generalizations.html">学校概况</a></li>
				<li><a href="#">教育教学</a></li>
				<li><a href="#">招生就业</a></li>
				<li><a href="#">专业设置</a></li>
				<li><a href="#">新闻中心</a></li>
				<li><a href="#">青春在线</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</nav>
	</div>
	<div class="m-header">
		<div class="m-logo">
	        <a href="index.html">
	            <img src="imgs/logo1.png" alt="logo">
	        </a>
	    </div>
	    <a href="javascript:;" class="m-nav-bt">
	        <em>
	            <p></p>
	            <p></p>
	            <p></p>
	        </em>
	    </a>
	</div>
	<ul class="m-nav">
		<li><a href="index.html">首页</a></li>
		<li><a href="generalizations.html">学校概况</a></li>
		<li><a href="#">教育教学</a></li>
		<li><a href="#">招生就业</a></li>
		<li><a href="#">专业设置</a></li>
		<li><a href="#">新闻中心</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
</header>
<section>
	<div class="gene-area">
		<div class="gene-body">
			<div class="gene-title">
				<div class="gene-title-left">
					<p>青春在线</p>
					<p>YOUTH&nbsp;&nbsp;ONLINE</p>
				</div>
				<div class="gene-title-right">
					<p><span>当前位置</span></p>
					<p>青春在线-成长档案</p>
				</div>
			</div>
			<div class="gene-box">
				<div class="gene-silde">
					<ul>
						<li>
							<a href="">学生作品</a>
						</li>
						<li>
							<a href="#">自我风采</a>
						</li>
						<li>
							<a href="#">校园生活</a>
						</li>
						<li>
							<a href="#">社团活动</a>
						</li>
						<li>
							<a href="#">成长档案</a>
						</li>
					</ul>
				</div>
				<div class="gene-article">
					<div class="search-area">
						<h2>成长档案查询</h2>
						<div class="stu-major-area select-div">
							<span>学生专业：</span>
							<input type="text" readonly="readonly" placeholder="请选择相应专业">
							<ul>
								<li>机械设计</li>
								<li>环境保护</li>
								<li>计算机</li>
							</ul>
							<button></button>
						</div>
						<div class="stu-grade-area select-div">
							<span>学生年级：</span>
							<input type="text" readonly="readonly" placeholder="请选择相应年级">
							<ul>
								<li>一年级</li>
								<li>二年级</li>
								<li>三年级</li>
							</ul>
							<button></button>
						</div>
						<div class="stu-class-area select-div">
							<span>学生班级：</span>
							<input type="text" readonly="readonly" placeholder="请选择相应班级">
							<ul>
								<li>1班</li>
								<li>2班</li>
								<li>3班</li>
							</ul>
							<button></button>
						</div>
						<a href="javascript:;">查询</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- 底部导航 -->
<footer>
	<div class="web-info">
		<div class="touch-list">
			<p>联系方式</p>
			<ul>
				<li>
					<a href="tel:0311-85855930">
						<span class="q1"></span>
						电话：0311-85855930&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0311-89681592
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<span class="q2"></span>
						传真：86-0311-83982527
					</a>	
				</li>
				<li>
					<a href="javascript:;">
						<span class="q3"></span>
						地址：河北省石家庄市东开发区海南路三号
					</a>
				</li>
			</ul>
		</div>
		<div class="link-list">
			<p>友情链接</p>
			<ul>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
				<li><a href="#">广通中专</a></li>
			</ul>
		</div>
		<div class="copyright-list">
			<p>版权所有</p>
			<ul>
				<li>Copyright © 2006All rights reserved 未经书面授权</li>
				<li>本站任何资源不得转载，违者必究</li>
				<li>冀ICP备05000398号 站长统计</li>
			</ul>

		</div>
		<div class="qr-area">
			<div class="focus-area">
				<span>关注广通</span>
			</div>
			<img src="imgs/qr.png"　alt="二维码">
		</div>
	</div>
	<div class="m-web-info">
		<span>版权所有：Copyright © 2006All rights reserved</span>
		<span>冀ICP备05000398号</span>
		<a href="javascript:;">站长统计</a>
	</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript">
	$(function(){
		//TAB切换-----学年评价
		$(".xq-list-li li").on("click",function(){
			var index = $(this).index();
			$(this).addClass('active-span').siblings().removeClass('active-span');
			$(".info-areaDetail").each(function() {
	          if (index == $(this).index()) {
	            $(this).siblings().removeClass('active-area');
	            $(this).addClass('active-area');
	          }
	        });
	        if (index==0||index==1) {
	        	$(".judge-list-area button").removeClass('active-button');
	        	$(".judge-list-area button").eq(0).addClass('active-button');
	        }else if(index==2||index==3){
	        	$(".judge-list-area button").removeClass('active-button');
	        	$(".judge-list-area button").eq(1).addClass('active-button');
	        }else{
	        	$(".judge-list-area button").removeClass('active-button');
	        	$(".judge-list-area button").eq(2).addClass('active-button');
	        };
		});
		$(".judge-list-area button").on("click",function(){
			$(".judge-list-area button").removeClass('active-button')
			$(this).addClass('active-button');
			var index = $(this).index();
			if(index == 0){
				$(".xq-list-li li").eq(0).addClass('active-span').siblings().removeClass('active-span');
				$(".info-areaDetail").eq(0).addClass('active-area').siblings().removeClass('active-area');
			}else if(index == 1){
				$(".xq-list-li li").eq(2).addClass('active-span').siblings().removeClass('active-span');
				$(".info-areaDetail").eq(2).addClass('active-area').siblings().removeClass('active-area');
			}else{
				$(".xq-list-li li").eq(4).addClass('active-span').siblings().removeClass('active-span');
				$(".info-areaDetail").eq(4).addClass('active-area').siblings().removeClass('active-area');
			}
		});
		//查询
		$(".select-div button").on("click",function(){
			$(this).siblings('ul').toggle(300);
		});
		$(".select-div").hover(function (){  
            // $(".content").show();  
        },function (){  
            $(this).find('ul').slideUp(300);  
        }); 
        $(".select-div ul li").on("click",function(){
        	$(this).parent().prev().attr("value",$(this).text());
        	$(this).parent().slideUp(300);
        })

	})
</script>
</body>
</html>